import React, { useEffect, useState, useRef } from 'react'
import { Typography, Modal, Tag, Table, Space, Tooltip, Row, Col } from 'antd';
import { QuestionCircleTwoTone } from '@ant-design/icons';
import axios from 'axios';
import MySpan from '../../../components/MySpan'
import moment from 'moment'
const { Text } = Typography
export default function Index() {
  const loginOrg = JSON.parse(localStorage.getItem("loginOrg"));
  const [listData, setListData] = useState([]);
  useEffect(async () => {
    const resp = await axios.get("http://localhost:8080/doFoMeHiotory?orgid=" + loginOrg.id)
    setListData(resp.data.data)
    console.log(resp);

    return () => {

    };
  }, []);
  const showDetailGoods = (record) => {
    Modal.info({
      title: '详细信息',
      content: <Row>
        {record.dodetail.map((item, index) => {
          return <Tag color="green">{item.goodsname}X{item.goodsnum}</Tag>
        })}
      </Row>,

    });
  }
  const columns = [
    {
      title: '用户昵称',
      key: 'nickname',
      render: (text, record) => (
        <Text type="secondary">{record.nickname}</Text>
      ),
    },
    {
      title: <Tooltip title="点击查看详情">物品数量 <QuestionCircleTwoTone /></Tooltip>,
      ellipsis: true,
      key: 'address',
      render: (text, record) => (
        <Space onClick={() => { showDetailGoods(record) }}>
          {record.dodetail.map((item, index) => {
            return <Tag color="green">{item.goodsname}X{item.goodsnum}</Tag>
          })}
        </Space>
      ),
    },


    {
      title: "发放积分",
      key: 'point',
      render: (text, record) => (
        <Text type="secondary">{record.point}</Text>
      ),
    },
    {
      title: '物流编号',
      key: 'dostate',
      render: (text, record) => (
        <MySpan title={record.doexpress} />
      ),
    },
    {
      title: '日期',
      key: 'createtime', ellipsis: true,
      sorter: (a, b) => a.createtime - b.createtime,
      render: (text, record) => (
        <MySpan title={moment(Number(record.createtime)).format('YYYY-MM-DD HH:mm:ss')} />
      )
    },

  ];
  return (
    <Table dataSource={listData} columns={columns} className="animate__animated animate__fadeIn" />
  )
}
